<template>
  <div class="workmain">
      <div class="work">
           <itemList class="itemList">
             <header class="newHeader">
                <div class="mycode">我的应用</div>
                <div class="editMsg" @click="savecode()">保存</div>
             </header>
             <div class="itemT itemTnew">
                <div class="newlist" v-for="(item,index) in menuList" @click="deletecode(item)">
                    <div class="Itop">
                        <img :src="item.ImgUrl"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        {{item.Name}}
                    </p>
                </div>
                <!--<div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/2.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        安全曝光台
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/3.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        领导带班
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/4.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        班组活动
                    </p>
                </div>
                 <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        安全生产例会
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/2.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        安全曝光台
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/3.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        领导带班
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/4.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        班组活动
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../assets/4.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        班组活动
                    </p>
                </div>
                <div class="newlist">
                    <div class="lastitem">

                    </div>
                </div>-->
             </div>
          </itemList>
           <itemList class="itemList itemList--new">
             <div>
                <Tab :default-color="'#333333'" :active-color="'#2269ff'" :line-width=4 custom-bar-width="90px">
                <TabItem selected @on-item-click="onItemClick">日常工作</TabItem>
                <TabItem @on-item-click="onItemClick">现场作业</TabItem>
                <TabItem @on-item-click="onItemClick">其他应用</TabItem>
                </Tab>
             </div>
             <div class="itemT itemTnew" v-if="selecteIndex==0">
                <div class="newlist">
                    <div class="Itop" @click="changeflag(0)">
                        <img src="../../assets/1-1.png"/>
                        <!--<x-icon type="ios-plus" size="24" class="number-show" v-if="showcode(0)"></x-icon>
                        <x-icon type="ios-plus" size="24" class="number-show1" v-if="!showcode(0)"></x-icon>-->
                        <img class="number-show" v-if="showcode(0)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(0)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        安全生产例会
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(1)">
                        <img src="../../assets/1-2.png"/>
                        <img class="number-show" v-if="showcode(1)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(1)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        安全曝光台
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(2)">
                        <img src="../../assets/1-3.png"/>
                         <img class="number-show" v-if="showcode(2)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(2)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        领导带班
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(3)">
                        <img src="../../assets/1-4.png"/>
                         <img class="number-show" v-if="showcode(3)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(3)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        班组活动
                    </p>
                </div>
             </div>
              <div class="itemT itemTnew" v-if="selecteIndex==1">
                <div class="newlist">
                    <div class="Itop" @click="changeflag(4)">
                        <img src="../../assets/3-1.png"/>
                        <img class="number-show" v-if="showcode(4)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(4)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                         安全检查
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(5)">
                        <img src="../../assets/3-2.png"/>
                        <img class="number-show" v-if="showcode(5)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(5)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        隐患管理
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(6)">
                        <img src="../../assets/3-3.png"/>
                         <img class="number-show" v-if="showcode(6)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(6)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        高风险作业
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(7)">
                        <img src="../../assets/3-4.png"/>
                         <img class="number-show" v-if="showcode(7)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(7)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        安全风险管理
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(8)">
                        <img src="../../assets/3-5.png"/>
                         <img class="number-show" v-if="showcode(8)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(8)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        施工用电
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(9)">
                        <img src="../../assets/3-6.png"/>
                         <img class="number-show" v-if="showcode(9)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(9)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        违章管理
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(10)">
                        <img src="../../assets/3-7.png"/>
                         <img class="number-show" v-if="showcode(10)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(10)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        设备管理
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(11)">
                        <img src="../../assets/3-8.png"/>
                         <img class="number-show" v-if="showcode(11)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(11)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        履职记录
                    </p>
                </div>
             </div>
              <div class="itemT itemTnew" v-if="selecteIndex==2">
                <div class="newlist">
                    <div class="Itop" @click="changeflag(12)">
                        <img src="../../assets/4-9.png"/>
                        <img class="number-show" v-if="showcode(12)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(12)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        人员管理
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(13)">
                        <img src="../../assets/4-10.png"/>
                        <img class="number-show" v-if="showcode(13)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(13)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        教育培训
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(14)">
                        <img src="../../assets/4-1.png"/>
                        <img class="number-show" v-if="showcode(14)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(14)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        事故上报
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(15)">
                        <img src="../../assets/4-2.png"/>
                         <img class="number-show" v-if="showcode(15)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(15)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        应急救援
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(16)">
                        <img src="../../assets/4-3.png"/>
                         <img class="number-show" v-if="showcode(16)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(16)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        安全文化
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(17)">
                        <img src="../../assets/4-4.png"/>
                         <img class="number-show" v-if="showcode(17)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(17)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        技术方案
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(18)">
                        <img src="../../assets/4-5.png"/>
                         <img class="number-show" v-if="showcode(18)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(18)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        制度管理
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(19)">
                        <img src="../../assets/4-6.png"/>
                         <img class="number-show" v-if="showcode(19)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(19)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        安全责任制
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop" @click="changeflag(20)">
                        <img src="../../assets/4-7.png"/>
                         <img class="number-show" v-if="showcode(20)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(20)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        职业健康
                    </p>
                </div>
                 <div class="newlist">
                    <div class="Itop" @click="changeflag(21)">
                        <img src="../../assets/4-8.png"/>
                         <img class="number-show" v-if="showcode(21)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(21)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        标准化自评
                    </p>
                </div>
             </div>
          </itemList>
      </div>

  </div>
</template>

<script>
import { InlineLoading, Tab, TabItem} from 'vux'
  import itemList from '@commonComponents/itemList/itemList'

  export default {
         name: 'newEdit',
         data () {
           return {
               show: true,
               flag: false,
               selecteIndex: 0,
               menuList: [],
                codeList: [],
                showList: [
                    {
                        ImgUrl: '../../../static/img/1-1.png',
                        Name: '安全生产例会',
                        Num: '',
                        Path: '',
                        Code: 0
                     },
                     {
                        ImgUrl: '../../../static/img/1-2.png',
                        Name: '安全曝光台',
                        Num: '',
                        Path: '',
                        Code: 1
                     },
                     {
                        ImgUrl: '../../../static/img/1-3.png',
                        Name: '领导带班',
                        Num: '',
                        Path: '',
                        Code: 2
                     },
                     {
                        ImgUrl: '../../../static/img/1-4.png',
                        Name: '班组活动',
                        Num: '',
                        Path: '',
                        Code: 3
                     },
                     {
                        ImgUrl: '../../../static/img/3-1.png',
                        Name: '安全检查',
                        Num: '',
                        Path: '/safeCheck',
                        Code: 4
                     },
                     {
                        ImgUrl: '../../../static/img/3-2.png',
                        Name: '隐患管理',
                        Num: '',
                        Path: '/hideManager',
                        Code: 5
                     },
                     {
                        ImgUrl: '../../../static/img/3-3.png',
                        Name: '高风险作业',
                        Num: '',
                        Path: '',
                        Code: 6
                     },
                     {
                        ImgUrl: '../../../static/img/3-4.png',
                        Name: '安全风险管理',
                        Num: '',
                        Path: '',
                        Code: 7
                     },
                     {
                        ImgUrl: '../../../static/img/3-5.png',
                        Name: '施工用电',
                        Num: '',
                        Path: '',
                        Code: 8
                     },
                     {
                       ImgUrl: '../../../static/img/3-6.png',
                        Name: '违章管理',
                        Num: '',
                        Path: '',
                        Code: 9
                     },
                     {
                        ImgUrl: '../../../static/img/3-7.png',
                        Name: '设备管理',
                        Num: '',
                        Path: '',
                        Code: 10
                     },
                     {
                       ImgUrl: '../../../static/img/3-8.png',
                        Name: '履职记录',
                        Num: '',
                        Path: '',
                        Code: 11
                     },
                     {
                       ImgUrl: '../../../static/img/4-1.png',
                        Name: '人员管理',
                        Num: '',
                        Path: '',
                        Code: 12
                     },
                     {
                        ImgUrl: '../../../static/img/4-2.png',
                        Name: '教育培训',
                        Num: '',
                        Path: '',
                        Code: 13
                     },
                     {
                        ImgUrl: '../../../static/img/4-3.png',
                        Name: '事故上报',
                        Num: '',
                        Path: '',
                        Code: 14
                     },
                     {
                        ImgUrl: '../../../static/img/4-4.png',
                        Name: '应急救援',
                        Num: '',
                        Path: '',
                        Code: 15
                     },
                     {
                        ImgUrl: '../../../static/img/4-5.png',
                        Name: '安全文化',
                        Num: '',
                        Path: '',
                        Code: 16
                     },
                     {
                        ImgUrl: '../../../static/img/4-6.png',
                        Name: '技术方案',
                        Num: '',
                        Path: '',
                        Code: 17
                     },
                     {
                        ImgUrl: '../../../static/img/4-7.png',
                        Name: '制度管理',
                        Num: '',
                        Path: '',
                        Code: 18
                     },
                     {
                        ImgUrl: '../../../static/img/4-8.png',
                        Name: '安全责任制',
                        Num: '',
                        Path: '',
                        Code: 19
                     },
                     {
                        ImgUrl: '../../../static/img/4-9.png',
                        Name: '职业健康',
                        Num: '',
                        Path: '',
                        Code: 20
                     },
                     {
                        ImgUrl: '../../../static/img/4-10.png',
                        Name: '标准化自评',
                        Num: '',
                        Path: '',
                        Code: 21
                     }

                ],
                userId: '',
                tokenId: '',
                projectId: '',
                userInfo: ''
           }
         },
         components: {
            itemList,
            Tab,
            TabItem,
            InlineLoading

         },
         created () {
             this.userInfo = JSON.parse(localStorage.userInfo)
    this.userId = this.userInfo.userid
    this.tokenId = this.userInfo.tokenId
    this.projectId = this.userInfo.deptid
             this.getdata()
         },
         methods: {

           changeMsg (flag) {
              this.flag = !this.flag
           },
onItemClick (index) {
             this.selecteIndex = index
               console.log(index)
           },
           getdata () {
               this.$vux.loading.show({
                text: '加载中...'
               })
               let param = {
                'allowPaging': true,
                'business': 'GetMainData',
                'data': {
                    'code': '3',
                    'type': '0'
                },
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': this.tokenId,
                'userId': this.userId
               }
                this.$axiosAjax.getConfigJson(
                    param
                ).then(
                    (res) => {
                        this.$vux.loading.hide()
                        console.log(res.data)
                        this.menuList = res.data.data

                        this.menuList.forEach(
                            (item, index) => {
                                 this.codeList = [...this.codeList, item.Code]
                            }
                        )
                        console.log(this.codeList)
                    }
                )
           },
           showcode (code) {
                var flag = false
                this.codeList.forEach(
                    (item, index) => {
                        if (item == code) {
                            flag = true
                        }
                    }
                )
                return flag
           },
           changeflag (code) {
               let flag = true
               this.codeList.forEach(
                   (item, index) => {
                       if (item == code) {
                           this.codeList.splice(index, 1)
                           this.menuList.splice(index, 1)
                           flag = false
                       }
                   }
               )
               if (flag) {
                    this.codeList = [...this.codeList, code]
                    this.menuList = [...this.menuList, this.showList[code]]
               }
               console.log(this.codeList)
            },
            deletecode (itemlist) {
                // debugger;
                console.log(this.codeList, itemlist)
                this.codeList.forEach(
                   (item, index) => {
                       if (item == itemlist.Code) {
                           this.codeList.splice(index, 1)
                           this.menuList.splice(index, 1)
                        //    flag = false;
                       }
                   }
               )
            },
            savecode () {
                let code = this.codeList.join(',')
                let param = {
                'allowPaging': false,
                    'business': 'SaveMainData',
                    'data': {
                        'code': code,
                        'type': '3'
                    },
                    'pageIndex': 0,
                    'pageSize': 20,
                    'tokenId': this.tokenId,
                    'userId': this.userId
               }
                this.$axiosAjax.getConfigJson(
                    param
                ).then(
                    (res) => {
                        this.$router.push('/Index/newEdit')
                    //    this.getdata();
                    }
                )
            }
         }
    }
</script>

<style scoped lang="less">
.workmain{
	width:100%;
  min-height:100%;
  background-color:#ebeef2;
  padding-top:20px;
  padding-bottom:50px;
  .work{
    width:100%;
    min-height:100%;
     filter: url(#goo);
    .newHeader{
       display:flex;
       justify-content: space-between;
       width:100%;
       >.mycode{
          font-size:15px;
          color:#333333;
          font-weight:bold;
          height:20px;
          line-height:20px;
       }
       >.editMsg{
          width:50px;
          height:20px;
          font-size:12px;
          line-height:20px;
          text-align:center;
          border:1px solid #2269ff;
          color:#fff;
          border-radius:10px;
          background-color:#2269ff;
       }
    }
  }
}
.newspan{
  text-align:center;
  font-size:20px;
}
.itemT{
  width:100%;
  display:flex;
  >.newlist{
     width:50px;
     margin-top:16px;
     >.Itop{
       width:28px;
       height:28px;
       margin:0 auto;
       position:relative;
       >img:first-child{
          width:100%;
          height:100%;
       }
       >img:nth-child(2n+2){
          width:50%;
          height:50%;
       }
       >.number-show{
         position:absolute;
         top:0;
         right:0;
        //  height:15px;
        //  width:15px;
        //  border-radius:50%;
        //  background-color:#ff0000;
        //  color:#fff;
        //  font-size:10px;
        //  text-align:center;
        //  line-height:15px;
       }
       
     }
     >.Ibottom{
       font-size:12px;
       text-align:center;
       line-height:14px;
       margin-top:7px;
     }
  }
}
.itemTnew{
        flex-wrap: wrap;
        margin-top:20px;
}
.itemTnew>.newlist{
     margin-right:44px;
     margin-bottom:15px;
}
.itemTnew>.newlist:nth-child(4n+4){
      margin-right:0;
}
.fixednew{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,.5);
}

.ss_menu{
    bottom: 75px;
    width: 50px;
    height: 50px;
    color: #fff;
    position: fixed;
    transition: all 1s ease;
    right: 30px;
     filter: url(#goo);
}
.share{
    position:absolute;
    top:0;
    left:0;
    width: 50px;
    height: 50px;
    padding:13px;
    background-color:#2269ff;
    border-radius:50%;
    padding:13px;
    >img{
      height:100%;
      width:100%;
    }
}
.firstList{
    filter: url(#goo);
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:70px;
  transition: all 1s ease;
  .f-icon{
    height:50px;
    width:50px;
    border-radius:50%;
    border:1px solid #2269ff;
    padding:13px;
    background-color:#fff;
      >img{
        height:100%;
          width:100%;
      }
    }
    >.f-word{
      width:70px;
      color:#fff;
      text-align:center;
      font-size:13px;
      height:13px;
      line-height:13px;
      margin-top:6px;
      transform:translate(-10px 0);
    }

}
.firstListnew{
  top:-85px;
  left:0;
}
.twoList{
  top: -37px;
  left:-60px;
}
.threeList{
  top: 37px;
  left:-80px;
}
.lastitem{
  width:100%;
  height:100%;
  background-color:#f4f8ff;
  border-radius:10px;
  border:1px dashed #ccc;
}
.bosafe_itemlist.itemList--new{
  margin-bottom:0;
  padding-bottom:20px;
}
</style>
